<style type="text/css">
   body{
       font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
       background-image:  url("images/bg.jpg");
       background-repeat:repeat;
   }
h1{
    font-size: 48px;
    color: rgb(6, 106, 117);
    padding: 2px 0 10px 0;
    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
}
h1:after{
    content: ' ';
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 10px;
    background: -moz-linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(147,184,189,0)), color-stop(20%,rgba(147,184,189,0.8)), color-stop(53%,rgba(147,184,189,1)), color-stop(79%,rgba(147,184,189,0.8)), color-stop(100%,rgba(147,184,189,0)));
    background: -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
    background: -o-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
    background: -ms-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
    background: linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
}
.login-page .login-form .form-group .input-group .input-group-addon,
.login-page .login-form .form-group .input-group .form-control {
    background: transparent;
    border: 0;
}
#register{
    position: absolute;
    top: 0px;
    width: 88%;
    padding: 18px 6% 60px 6%;
    margin: 50px 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -webkit-box-shadow: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    .btn{

        cursor: pointer;
        background: rgb(61, 157, 179);
        font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
        color: #fff;
        font-size: 24px;
        border: 1px solid rgb(28, 108, 122);
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
        -moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
        box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }
</style>

<div class="panel panel-default">
    <div  class="col-md-4">
    </div>
    <div  class="col-md-4">
        <form role="form" name="registerForm" id="register" ng-submit="register(registerForm.userPassword1)">
            <h1>用户注册</h1>
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" ng-model="participant.username"
                       placeholder="请输入姓名" required>
            </div>
            <div class="form-group">
                <label>注册类型</label>
                <label>
                    <input type="radio" name="type" ng-model="participant.registerType"
                           value="parent" required> 家长
                </label>
                <label>
                    <input type="radio" name="type" ng-model="participant.registerType"
                           value="student" required> 学生
                </label>
            </div>

            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control" name="userPassword1" ng-model="participant.password"
                       placeholder="请输入密码"  required>
            </div>
            <div class="form-group">
                <label>确认密码</label>
                <input type="password" class="form-control" name="userPassword2" ng-model="participant.tempField" placeholder="再次输入密码"  required>
            </div>

            <div  class="col-md-4">
            </div>
            <div  class="col-md-4">
                <button class="btn btn-primary">提交</button>
            </div>
        </form>
    </div>
    <div  class="col-md-4">
    </div>
</div>


